<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Ollama Chat</title>
    <style>
      /* 初始加载动画样式 */
      #initial-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.3s ease-out;
      }
      
      @media (prefers-color-scheme: dark) {
        #initial-loader {
          background-color: #0a0a0a;
          color: #ffffff;
        }
      }
      
      .loader-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid #e5e7eb;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 24px;
      }
      
      @media (prefers-color-scheme: dark) {
        .loader-spinner {
          border-color: #374151;
          border-top-color: #60a5fa;
        }
      }
      
      .loader-text {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 8px;
      }
      
      @media (prefers-color-scheme: dark) {
        .loader-text {
          color: #f9fafb;
        }
      }
      
      .loader-subtitle {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 14px;
        color: #6b7280;
        animation: pulse 2s ease-in-out infinite;
      }
      
      @media (prefers-color-scheme: dark) {
        .loader-subtitle {
          color: #9ca3af;
        }
      }
      
      .loader-progress {
        width: 200px;
        height: 4px;
        background-color: #e5e7eb;
        border-radius: 2px;
        overflow: hidden;
        margin-top: 24px;
      }
      
      @media (prefers-color-scheme: dark) {
        .loader-progress {
          background-color: #374151;
        }
      }
      
      .loader-progress-bar {
        height: 100%;
        background-color: #3b82f6;
        border-radius: 2px;
        animation: progress 2s ease-in-out infinite;
      }
      
      @media (prefers-color-scheme: dark) {
        .loader-progress-bar {
          background-color: #60a5fa;
        }
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }
      
      @keyframes progress {
        0% {
          width: 0%;
          transform: translateX(-100%);
        }
        50% {
          width: 100%;
          transform: translateX(0%);
        }
        100% {
          width: 100%;
          transform: translateX(100%);
        }
      }
      
      /* 隐藏加载器的类 */
      .loader-hidden {
        opacity: 0;
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <!-- 初始加载动画 -->
    <div id="initial-loader">
      <div class="loader-spinner"></div>
      <div class="loader-text">Vue Ollama Chat</div>
      <div class="loader-subtitle">正在初始化应用...</div>
      <div class="loader-progress">
        <div class="loader-progress-bar"></div>
      </div>
    </div>
    
    <!-- Vue应用挂载点 -->
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
